<template>
  <div class="home">
    <router-view></router-view>

    <tabbar
      ref="tabbar"
      :active-color="activeColor"
      :inactive-color="normalColor"
      v-model="active"
      @change="tabbarChange"
    >
      <tabbar-item
        v-for="(item,index) in tabbarList"
        :key="index"
        :to="item.path"
        :info="item.title == '购物车'&& cartList.length ? cartList.length : ''"
      >
        <span :style="{color: active == index ? activeColor : normalColor}">{{item.title}}</span>
        <img slot="icon" :src="active == index ? item.active : item.normal" />
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { Tabbar, TabbarItem } from "vant";

export default {
  name: "home",
  data() {
    return {
      activeColor: "#23397A",
      normalColor: "#949BA3",
      active: Number(localStorage.getItem("homeTabbarIndex")) || 0,
      cartList: [],
      tabbarList: [
        {
          title: "信息",
          normal: require("../img/信息.png"),
          active: require("../img/信息拷贝.png"),
          path: "/home/message"
        },
        {
          title: "商城",
          normal: require("../img/商城.png"),
          active: require("../img/商城拷贝.png"),
          path: "/home/shopping_mall"
        },
        {
          title: "购物车",
          normal: require("../img/购物车满.png"),
          active: require("../img/购物车满拷贝.png"),
          path: "/home/shopping_cart"
        },
        {
          title: "我的",
          normal: require("../img/我的拷贝.png"),
          active: require("../img/我的.png"),
          path: "/home/my"
        }
        // {
        //   title: "客服",
        //   normal: require("../img/客服.png"),
        //   active: require("../img/客服拷贝.png"),
        //   path: "/home/customer_service_not_found"
        // }
      ]
    };
  },
  components: {
    Tabbar,
    TabbarItem
  },
  updated() {
    this.setTabbar();
  },
  mounted() {
    this.setTabbar();
    this.cartList = localStorage.getItem("addCart")
      ? JSON.parse(localStorage.getItem("addCart"))
      : [];
  },
  methods: {
    // 根据路径来修改this.active
    setTabbar() {
      let toPath = this.$route.path;
      if (toPath == "/home/my") {
        this.active = 3;
      } else if (toPath == "/home/shopping_cart") {
        this.active = 2;
      } else if (toPath == "/home/shopping_mall") {
        this.active = 1;
      } else if (toPath == "/home/message") {
        this.active = 0;
      }
    },
    tabbarChange(index) {
      localStorage.setItem("homeTabbarIndex", index);
      // console.log(index);
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  /* height: 100%; */
  padding-bottom: 60px;
}
</style>